<script setup>
import { ref, reactive, onMounted } from 'vue'
import { alertListApi, taskManageMylistApi, taskManageMyAlllistApi } from '@/apis/index.js'

const loading = ref(false)
const list = reactive([{
	name: '待办事项',
	icon: '📝',
	count: 0,
	color: '#409EFF',
	url: '/pages/serviceWorkbench/backlog',
	bg: 'rgba(64, 158, 255, 0.08)'
},
{
	name: '已办事项',
	icon: '✅',
	count: 0,
	color: '#67C23A',
	url: '/pages/serviceWorkbench/haveDone',
	bg: 'rgba(103, 194, 58, 0.08)'
},
{
	name: '预警提醒',
	icon: '⚠️',
	count: 0,
	color: '#E6A23C',
	url: '/pages/serviceWorkbench/alert',
	bg: 'rgba(230, 162, 60, 0.08)'
}
])

const fetchData = async () => {
	try {
		loading.value = true
		await getTaskManageMylist()
	} finally {
		loading.value = false
	}
}

const getTaskManageMylist = async () => {
	const param = {
		pageSize: 10,
		pageNum: 1
	}
	const [res, res1, res2] = await Promise.all([
		alertListApi({}),
		taskManageMylistApi(param),
		taskManageMyAlllistApi(param)
	])
	list[2].count = res.total
	list[0].count = res1.total
	list[1].count = res2.total
}

const handlerserviceWork = (item) => {
	if (!item.url) return
	uni.navigateTo({
		url: item.url
	})
}

onMounted(fetchData)
</script>

<template>
	<view class="worktable">
		<view class="content">
			<view class="header">
				<view class="title">
					服务工作台
					<view class="title-line"></view>
				</view>
			</view>
			<view class="list">
				<view class="item" v-for="(item, index) in list" :key="index"
					:style="{ '--item-color': item.color, '--item-bg': item.bg }" @click="handlerserviceWork(item)">
					<view class="item-icon">
						{{ item.icon }}
					</view>
					<view class="item-name">
						{{ item.name }}
					</view>
					<view class="item-count">
						{{ item.count }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
.worktable {
	width: 100%;
	margin: 20rpx 0;
	box-sizing: border-box;

	.content {
		width: 100%;
		background: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

		.header {
			margin-bottom: 14rpx;
			position: relative;

			.title {
				font-size: 32rpx;
				font-weight: 600;
				color: $list-color;
				position: relative;
				display: inline-block;
				margin-bottom: 8rpx;
			}

			.title-line {
				position: absolute;
				left: 0;
				bottom: 2rpx;
				width: 100%;
				height: 6rpx;
				background: linear-gradient(90deg, var(--item-color), transparent);
				opacity: 0.3;
				border-radius: 3rpx;
			}
		}

		.list {
			display: flex;
			justify-content: space-between;
			gap: 20rpx;

			.item {
				flex: 1;
				height: 180rpx;
				background: var(--item-bg);
				border-radius: 12rpx;
				padding: 20rpx 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				transition: all 0.2s;
				position: relative;
				overflow: hidden;

				&::after {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 2rpx;
					background: var(--item-color);
				}

				.item-icon {
					font-size: 50rpx;
					margin-bottom: 15rpx;
					color: var(--item-color);
					transition: all 0.2s;
				}

				.item-name {
					font-size: $list-font-size;
					color: $list-color;
					margin-bottom: 8rpx;
					font-weight: 400;
				}

				.item-count {
					font-size: 30rpx;
					font-weight: bold;
					color: var(--item-color);
				}

				&:active {
					transform: scale(0.98);

					.item-icon {
						transform: scale(1.1);
					}
				}
			}
		}
	}
}
</style>